:root {
  --swiper-theme-color: var(--primary-color);
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: var(--module-bg-lighter);
  --swiper-pagination-bullet-inactive-opacity: 0.3;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 5px;
  --swiper-pagination-bullet-vertical-gap: 8px;
}

// swiper
.swiper-wrapper {
  z-index: $z-index-normal + 1;
}

.swiper-pagination {
  z-index: $z-index-normal + 2;
}

.swiper-button-prev,
.swiper-button-next {
  z-index: $z-index-normal + 3;
}

.swiper-pagination-bullet {
  border-radius: $xs-radius;
  transition: all $transition-time-fast;
  &.swiper-pagination-bullet-active {
    background: $module-bg;
  }
  &:hover {
    background: $module-bg-lighter;
  }
}
